import React, { useState, useMemo, useEffect } from 'react';
import './index.less';
import { Select, Button, Row, Col, Input, Space, Checkbox, Modal } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import { translateApi, feedBackApi, getErrorTypeApi } from 'api/api';
import { useRequest } from 'ahooks';
const languageMap: any = {
    zh: '中文(简体)',
    en: '英语',
};
// const reportCheckOptions = [
//     { label: '质量不佳', value: '1' },
//     { label: '用词不当', value: '2' },
//     { label: '语法有误', value: '3' },
//     { label: '其他', value: '4' },
// ];
const Home = () => {
    const [languages, setLanguages] = useState(() =>
        Object.keys(languageMap).map((key) => ({ label: languageMap[key], value: key })),
    );
    const [sourceLanguage, setSourceLanguage] = useState('zh');
    const [targetLanguage, setTargetLanguage] = useState('en');
    const [originText, setOriginText] = useState(''); // 翻译文本
    const [resultText, setResultText] = useState(''); // 翻译结果
    const [reportModalVisible, setReportModalVisible] = useState(false);
    const [checkedErrorType, setCheckedErrorType] = useState<any[]>([]);
    const [adviseText, setAdviseText] = useState(''); // 纠错结果
    const translateBtnDisabled = useMemo(() => {
        // 相同语种不可翻译
        return sourceLanguage === targetLanguage || originText.trim() === '';
    }, [sourceLanguage, targetLanguage, originText]);
    useEffect(() => {
        if (originText === '') { // 清空翻译文本时 清空翻译结果
            setResultText('');
        }
    }, [originText]);
    const { data: reportCheckOptions } = useRequest(getErrorTypeApi)
    /** 交换语种 */
    const exchangeLanguage = () => {
        const [newSourceLanguage, newTargetLanguage] = [targetLanguage, sourceLanguage];
        setSourceLanguage(newSourceLanguage);
        setTargetLanguage(newTargetLanguage);
    };
    /** 开始翻译 */
    const startTranslate = () => {
        const params = {

        }
        translateApi(params).then(() => {

        })
        setResultText('test');
    };
    /** 点击纠错 */
    const reportError = () => {
        setCheckedErrorType(['1']);
        setAdviseText(resultText);
        setReportModalVisible(true);
    };
    /** 点击提交 */
    const onOk = () => {
        const params = {

        }
        feedBackApi(params).then(() => {

        })
    };
    return (
        <div className="translate">
            <Space size="large">
                <Select
                    value={sourceLanguage}
                    style={{ width: 200 }}
                    onChange={(value) => setSourceLanguage(value)}
                >
                    {languages.map((language) => (
                        <Select.Option key={language.value} value={language.value}>
                            {language.label}
                        </Select.Option>
                    ))}
                </Select>
                <SwapOutlined onClick={exchangeLanguage} />
                <Select
                    value={targetLanguage}
                    style={{ width: 200 }}
                    onChange={(value) => setTargetLanguage(value)}
                >
                    {languages.map((language) => (
                        <Select.Option key={language.value} value={language.value}>
                            {language.label}
                        </Select.Option>
                    ))}
                </Select>
                <Button type="primary" onClick={startTranslate} disabled={translateBtnDisabled} style={{ width: 150 }}>
                    开始翻译
                </Button>
                {resultText && (
                    <Button onClick={reportError} type="primary">
                        纠错
                    </Button>
                )}
            </Space>
            <Row className="mt20">
                <Col span={12}>
                    <Input.TextArea
                        style={{ height: 400 }}
                        placeholder="请输入需要翻译的内容"
                        onChange={(e) => setOriginText(e.target.value)}
                        maxLength={10}
                        allowClear
                    />
                </Col>
                <Col span={12} className="result-text">
                    {resultText}
                </Col>
            </Row>
            <Modal
                title="翻译报错反馈"
                visible={reportModalVisible}
                okText="提交"
                cancelText="取消"
                onOk={onOk}
                onCancel={() => setReportModalVisible(false)}
            >
                <Space className="mb20">
                    <span>错误类型：</span>
                    <Checkbox.Group
                        options={reportCheckOptions}
                        value={checkedErrorType}
                        onChange={(value) => setCheckedErrorType(value)}
                    />
                </Space>
                <div className="mb20">纠正的译文</div>
                <Input.TextArea value={adviseText} onChange={(e) => setAdviseText(e.target.value)} />
            </Modal>
        </div>
    );
};
export default Home;
